<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生的Ajax发送POST请求</title>
    <script>
       //XMLHttpRequest 可以发送一个异步请求

        //实例化
        var  xhq = new XMLHttpRequest;

        //发送一个请求
       /*
        2、post方式发送请求，传参时需要将参数放到xhq.send()中，格式为：key=val&key1=val1

        注意：post方式发送请求时，需要指定一个请求头，Content-Type
        */
        xhq.open('post','01.php');

        //需要指定一个Content-Type.消息头
        xhq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        //发送
        xhq.send('name=zhangsan&age=12');

        //监听状态，等待处理
        xhq.onreadystatechange = function(){
            if(xhq.readyState == 4 && xhq.status == 200){
                console.log(xhq.responseText);
                document.querySelector("p").innerHTML = xhq.responseText;
            }
        }

        /*
           GET 和 POST 请求方法的差异：
           1、GET没有请求主体，使用xhq.send();
           2、GET可以通过在请求URL上添加请求参数
           3、POST可以通过xhq.send("name=val&age=val")设置请求参数
           4、POST需要设置请求头Content-Type
              xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
           5、GET请求效率更好(应用多)
           6、GET大小限制约4K,POST没有限制
         */
    </script>
</head>
<body>
    <p></p>
</body>
</html>